import Layer from '../../core/Layer';
import Sector from '../../base/Sector';
import Ring from '../../base/Ring';
import Text from '../../base/Text';
import MultiLine from '../../base/MultiLine';
import Point from '../../core/Point';

export default class extends Layer {
    constructor(canvas, style, data = 0) {
        super(canvas, style);
        this.style = style;
        this.data = data;
        this.shape = style.shape || 'sector';
        this.start = style.start !== undefined ? style.start : 0;
        this.end = style.end !== undefined ? style.end : 360;
    }

    build(painter) {
        this.childs.splice(0);
        if (this.shape === 'sector') {
            const sector = new Sector(this.canvas, {
                ...this.style,
                startAngle: this.start,
                endAngle: this.end,
            });
            const angle = (this.start + this.end) / 360 * Math.PI;
            const x = this.style.radius * Math.cos(angle);
            const y = this.style.radius * Math.sin(angle);
            const x1 = (this.style.radius + 30) * Math.cos(angle);
            const y1 = (this.style.radius + 30) * Math.sin(angle);
            const multi = new MultiLine(this.canvas, {
                ...this.style,
            }, [
                new Point(x, y),
                new Point(x1, y1),
                new Point(x1 + 20, y1),
            ]);
            const txt = new Text(this.canvas, {
                ...this.style,
                text: this.data,
                left: x1 + 20,
                bottom: y1,
            });
            this.addChild(sector, multi, txt);
        } else if (this.shape === 'ring') {
            const ring = new Ring(this.canvas, {
                ...this.style,
                startAngle: this.start,
                endAngle: this.end,
            });
            const angle = (this.start + this.end) / 360 * Math.PI;
            const x = this.style.longRadius * Math.cos(angle);
            const y = this.style.longRadius * Math.sin(angle);
            const x1 = (this.style.longRadius + 30) * Math.cos(angle);
            const y1 = (this.style.longRadius + 30) * Math.sin(angle);
            const multi = new MultiLine(this.canvas, {
                ...this.style,
            }, [
                new Point(x, y),
                new Point(x1, y1),
                new Point(x1 + 20, y1),
            ]);
            const txt = new Text(this.canvas, {
                ...this.style,
                text: this.data,
                left: x1 + 20,
                bottom: y1,
            });
            this.addChild(ring, multi, txt);
        }
    }
}
